<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  	<head>
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    	<title>Form Element - Text Field</title>
    	<script type="text/javascript">
      		window.onload = validateForm;

	      	function validateForm() {
	        	window.document.form1.username.onchange = usernameChanged;
	        	window.document.form1.age.onblur = checkAge;
        		window.document.form1.checkForm.onclick = checkFormValue;
      		}

      		function usernameChanged() {
        		window.status = "Hi " + document.form1.username.value;
      		}

      		function checkAge() {
        		var textAge = document.form1.age;
        		if(isNaN(textAge.value) == true) {
	          		alert("Please enter a valid age.");
	          		textAge.focus();// 获得焦点
	          		textAge.select();// 选中文本
	        	}
      		}

      		function checkFormValue() {
        		var myForm = document.form1;
        		if(myForm.username.value == "" || myForm.age.value == "") {
          			alert("Please completed all the form.");
          			if(myForm.username.value == "") {
		            	myForm.username.focus();
		          	} else {
		            	myForm.age.focus();
          			}
        		} else {
          			alert("Thanks for completing the form.");
        		}
      		}
    	</script>
  	</head>
  	<body>
    	<form name="form1" action="">
	      	Please enter the following details:
	      	<p>Name
	        <br/>
	        	<input type="text" name="username" />
	        <br/>
      		</p>

      		<p>Age
        	<br/>
        		<input type="text" name="age" size="3" maxlength="3" />
        	<br/>
      		</p>

      		<input type="button" name="checkForm" value="Check" />
    	</form>
  	</body>
</html>
